<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
            overflow-y: auto;
        }
    </style>
</head>

<body>
    <div class="box">
        测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    </div>
</body>
<script>
    // onclick      鼠标左键单击时触发(鼠标左键 按下并松开)
    // ondblclick   鼠标左键双击时触发
    // onmousedown  鼠标按下时触发 (左 中 右 侧)
    // onmousemove  鼠标移动时触发
    // onmouseup    鼠标松开时触发
    // onmouseover  鼠标移入触发触发
    // onmouseout   鼠标移出触发触发
    // onmousewheel  鼠标滑轮滚动时触发

    var box = document.getElementsByClassName("box")[0];

    // box.onclick = function () {
    //     console.log("box被单击");
    // }

    // box.ondblclick = function () {
    //     console.log("box被双击");
    // }


    // 事件  => 事件发生并得到处理的过程
    // 1. 先绑定事件 -> 提前决定好事件触发时要执行的内容
    // 2. 浏览器监听到事件触发之后 -> 执行既定的函数 ->  传入一个事件对象 -> 携带着事件发生的信息
    // box.onmousedown = function (e) { // 形参 e evt event  事件对象 -> 用于接收事件发生时的相关信息(什么事件 触发了什么类型的事件 谁触发的   鼠标: 按下的按键 鼠标位置 )
    //     console.log("鼠标被按下", e.button);  // 按下的鼠标按键 (左:0 中:1 右:2 侧:3 4)
    // }

    // box.onmouseup = function (e) { // 形参 e evt event
    //     console.log("鼠标松开", e.button);
    // }

    // box.onmousemove = function () {
    //     console.log("鼠标在box上移动");
    // }

    // box.onmouseover = function () {
    //     console.log("鼠标移入");
    // }

    // box.onmouseout = function () {
    //     console.log("鼠标移出");
    // }

    // console.dir(box)
    // window.onwheel = function () {  //页面滑轮滚动
    //     console.log("鼠标滑轮滚动");
    // }

    // window.onscroll = function () {  //滚动条滚动 (前提: 有滚动条)
    //     console.log("滚动条滚动");
    // }

    // box.onmousewheel = function () {  // 元素上面滑轮滚动
    //     console.log("元素上鼠标滑轮滚动");
    // }





</script>

</html>